<template>
  <TabLayout>
    <template #header>

      <uni-search-bar placeholder="请输入条形码、名称" @confirm="handleSearch"
                      v-model="keyword" cancelButton="none" clearButton="auto">
      </uni-search-bar>
    </template>
    <movable-area class="h-full w-full">
      <movable-view x="30" y="1000" :out-of-bounds="false" class="z-50" direction="all">
        <uni-fab @fabClick="handleAdd"></uni-fab>
      </movable-view>
      <scroll-view scroll-y="true" @scrolltolower="handleMore" class="h-full">
        <view v-for="(item,index) in supplierList" :key="index" @click="handleSelect(item)">
          <SupplierItem :supplier="item" :selected="selectedSupplier" @manage="handleManage"></SupplierItem>
        </view>
        <uni-load-more :status="loadMoreStatus"></uni-load-more>
      </scroll-view>
    </movable-area>
  </TabLayout>
</template>
<script setup lang="ts">

import TabLayout from "@/pages/product/components/TabLayout.vue";
import {computed, onMounted, ref} from "vue";

import {useProductStore} from "@/store/product";
import {storeToRefs} from "pinia";
import api from "@/api";
import SupplierItem from "@/pages/product/supplier/components/SupplierItem.vue";
import {onPullDownRefresh} from "@dcloudio/uni-app";

const productStore = useProductStore()
const {supplierList, supplierTotal, selectedSupplier, editMode} = storeToRefs(productStore)


const keyword = ref('')
const loadMoreStatus = computed((() => {
  if (supplierTotal.value > supplierList.value.length) {
    return 'more'
  } else {
    return 'no-more'
  }
}))

const pageNo = ref(1)
const pageSize = ref(10)
const orParams = computed(() => {
  return {
    name: `%${keyword.value}%`,
    contact: `%${keyword.value}%`
  }
})
const andParams = ref({})
const orderParams = ref({
  updatedAt: '降序'
})

onMounted(() => {
  supplierList.value = []
  getList()
})
const getList = () => {
  api.supplier.queryList({
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    orParams: JSON.stringify(orParams.value),
    andParams: JSON.stringify(andParams.value),
    orderParams: JSON.stringify(orderParams.value)
  }).then((res: any) => {
    supplierList.value = supplierList.value.concat(res.data.data.records)
    supplierTotal.value = res.data.data.total
  })
}

const handleSearch = () => {
  supplierTotal.value = 0
  supplierList.value = []
  pageNo.value = 1
  getList()
}
const handleSelect = (item: ISupplier) => {
  selectedSupplier.value = item
}
const handleMore = () => {
  if (supplierTotal.value > supplierList.value.length) {
    pageNo.value++
    getList()
  }
}
const handleManage = (item: ISupplier) => {
  selectedSupplier.value = item
  editMode.value = 'update'
  uni.navigateTo({
    url: `/pages/product/supplier/supplierEdit`
  })
}
const handleAdd = () => {
  selectedSupplier.value = <ISupplier>{}
  editMode.value = 'add'
  uni.navigateTo({
    url: `/pages/product/supplier/supplierEdit`
  })
}
onPullDownRefresh(()=> {
  handleSearch()
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 200);
})

</script>


<style scoped>

</style>